<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册 - 论坛</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <style>
        .bg-cover-custom {
            background-image: url('https://images.unsplash.com/photo-1522199710521-72d69614c702?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzNjUyOXwwfDF8c2VhcmNofDF8fGxhbmRzY2FwZXxlbnwwfHx8fDE2MzgzNzA1OTk&ixlib=rb-1.2.1&q=80&w=1920');
            background-size: cover;
            background-position: center;
        }
    </style>
</head>
<body class="h-screen flex items-center justify-center">
    <div class="flex flex-row w-full h-full">
        <div class="w-2/3 bg-cover-custom flex items-center justify-center">
            <div class="text-center text-white p-8">
                <h2 class="text-4xl font-bold mb-4">欢迎光临</h2>
                <p class="text-lg">欢迎来到我们的俱乐部，在这里和志同道合的朋友一起分享有趣的故事，一起享受有趣的活动...</p>
            </div>
        </div>
        <div class="w-1/3 bg-white p-8 rounded-2xl shadow-lg flex flex-col justify-center">
            <h2 class="text-2xl font-bold text-center mb-6">注册</h2>
            <form action="register.php" method="POST" class="space-y-6">
                <div class="space-y-2">
                    <label for="username" class="block text-sm font-medium text-gray-700">用户名:</label>
                    <div class="relative">
                        <input type="text" id="username" name="username" required placeholder="请输入用户名" class="w-full p-3 rounded-lg bg-gray-100 text-gray-700 border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <span class="absolute inset-y-0 right-3 flex items-center text-gray-500">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                                <path fill-rule="evenodd" d="M10 2a6 6 0 100 12A6 6 0 0010 2zM8 9a2 2 0 114 0 2 2 0 01-4 0z" clip-rule="evenodd" />
                            </svg>
                        </span>
                    </div>
                </div>
                <div class="space-y-2">
                    <label for="email" class="block text-sm font-medium text-gray-700">邮箱:</label>
                    <div class="relative">
                        <input type="email" id="email" name="email" required placeholder="请输入邮箱" class="w-full p-3 rounded-lg bg-gray-100 text-gray-700 border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <span class="absolute inset-y-0 right-3 flex items-center text-gray-500">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                                <path fill-rule="evenodd" d="M2 5a2 2 0 012-2h12a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V5zm12 5H6a1 1 0 110-2h8a1 1 0 110 2z" clip-rule="evenodd" />
                            </svg>
                        </span>
                    </div>
                </div>
                <div class="space-y-2">
                    <label for="password" class="block text-sm font-medium text-gray-700">密码:</label>
                    <div class="relative">
                        <input type="password" id="password" name="password" required placeholder="请输入密码" class="w-full p-3 rounded-lg bg-gray-100 text-gray-700 border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <span class="absolute inset-y-0 right-3 flex items-center text-gray-500">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                                <path fill-rule="evenodd" d="M5 8a3 3 0 016 0v1h2a1 1 0 011 1v6a1 1 0 01-1 1H6a1 1 0 01-1-1v-6a1 1 0 011-1h2V8zm3 4a1 1 0 100-2 1 1 0 000 2zM4 10V8a4 4 0 118 0v2h-1v-2a3 3 0 00-6 0v2H4z" clip-rule="evenodd" />
                        </svg>
                    </span>
                </div>
                </div>
                <div class="space-y-2">
                    <label for="confirm_password" class="block text-sm font-medium text-gray-700">确认密码:</label>
                    <div class="relative">
                        <input type="password" id="confirm_password" name="confirm_password" required placeholder="请确认密码" class="w-full p-3 rounded-lg bg-gray-100 text-gray-700 border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <span class="absolute inset-y-0 right-3 flex items-center text-gray-500">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                                <path fill-rule="evenodd" d="M5 8a3 3 0 016 0v1h2a1 1 0 011 1v6a1 1 0 01-1 1H6a1 1 0 01-1-1v-6a1 1 0 011-1h2V8zm3 4a1 1 0 100-2 1 1 0 000 2zM4 10V8a4 4 0 118 0v2h-1v-2a3 3 0 00-6 0v2H4z" clip-rule="evenodd" />
                        </svg>
                    </span>
                </div>
                </div>
                <button type="submit" name="register" class="w-full py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">注册</button>
            </form>
            <?php
            if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST['register'])) {
                require 'config.php';

                $username = $_POST['username'];
                $email = $_POST['email'];
                $password = $_POST['password'];
                $confirm_password = $_POST['confirm_password'];

                if ($password !== $confirm_password) {
                    echo "<p class='error text-red-500 mt-4'>密码和确认密码不匹配</p>";
                } else {
                    // 哈希密码
                    $hashed_password = password_hash($password, PASSWORD_DEFAULT);

                    // 检查用户名或邮箱是否已存在
                    $stmt = $conn->prepare("SELECT id FROM users WHERE username = ? OR email = ?");
                    $stmt->bind_param("ss", $username, $email);
                    $stmt->execute();
                    $stmt->store_result();

                    if ($stmt->num_rows > 0) {
                        echo "<p class='error text-red-500 mt-4'>用户名或邮箱已存在</p>";
                    } else {
                        // 插入新用户
                        $stmt = $conn->prepare("INSERT INTO users (username, email, password) VALUES (?, ?, ?)");
                        $stmt->bind_param("sss", $username, $email, $hashed_password);

                        if ($stmt->execute()) {
                            echo "<p class='success text-green-500 mt-4'>注册成功，请<a href='login.php' class='text-blue-500 hover:underline'>登录</a></p>";
                        } else {
                            echo "<p class='error text-red-500 mt-4'>注册失败，请重试</p>";
                        }
                    }

                    $stmt->close();
                }

                $conn->close();
            }
            ?>
        </div>
    </div>
</body>
</html>